<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现 选中文本 加样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .toolBox {
            width: 200px;
            height: 30px;
            display: flex;
            background: black;
            color: white;
            /* display: none; */
            cursor: pointer;
            z-index: 999;
        }
 
        .toolBox div {
            width: auto;
            height: 100%;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
 
<body>
    <div class="toolBox">
        <div>下划线 | </div>
        <div>标注背景色 |</div>
        <div>改变字体颜色</div>
    </div>
    <div class="text">
        先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
 
        先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
    </div>
 
</body>
<script>
    let toolBox = document.getElementsByClassName("toolBox")[0];
    let textDom = document.getElementsByClassName("text")[0];
    let val = "";
    toolBox.onclick = function (e) {
        let tool = e.target;
        let toolTxt = tool.innerText;
        if (toolTxt.indexOf("划线") > -1) {
            add(1, val)
        } else if (toolTxt.indexOf("标注背景色") > -1) {
            add(2, val)
        } else {
            add(3, val)
        }
    }
    //鼠标监听,当释放鼠标的时候，调用testSelection()方法。
    textDom.onmouseup = function () {
        val = testSelection();
        console.log(val)
    }
    function testSelection() {
        //获取Selection对象
        let selection = window.getSelection();
        //调用selection对象的toString()方法就可以获取鼠标拖动选中的文本。
        console.log("选中的文本为：");
        console.log(selection.toString());
        //选中的值
        let str = selection.toString();
        return str;
 
    }
 
    function add(type, str) {
        let textDom = document.getElementsByClassName("text")[0];
        let text = textDom.innerHTML;
        //匹配传入的搜索值不区分大小写 i表示不区分大小写，g表示全局搜索  匹配标签
        let rReg = new RegExp(`${str}`, "");
        //替换后的值
        let rHtml = "";
        if (type == 1) {
            rHtml = text.replace(rReg, `<span style=" color:red;text-decoration:underline;">${str}</span>`);
        } else if (type == 2) {
            rHtml = text.replace(rReg, `<span style="background: red;">${str}</span>`);
        } else {
            rHtml = text.replace(rReg, `<span style="color: red;">${str}</span>`);
        }
        console.log(rHtml)
        textDom.innerHTML = rHtml;
    }
</script>
 
</html>